import React, { Component } from 'react'
import "./Searchdetails.scss"
import Left from "../searchContent/images/left.png"
import hc from "./images/hc.png"
import gg from "./images/gg.png"
import sc from "./images/sc.png"
import { Tabs, Badge } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
import fetchjsonp from "fetch-jsonp"
const tabs = [
    { title: <Badge >综合</Badge> },
    { title: <Badge >销量</Badge> },
    { title: <Badge >新品</Badge> },
    { title: <Badge >价格</Badge> },
];

export default class Searchdetails extends Component {
    constructor(props) {
        super()
        this.state = {
            name: [],
            Hot: [],//综合
            xl: [],//销量
            xin: [],//新款
            main: [],//价格
            min: "",
            max: ""
        }
    }

    componentDidMount() {

        var myList = window.localStorage.getItem('myList')
        myList = myList.split(',')
        this.setState({
            name: myList[myList.length - 1]
        })
        setTimeout(() => {
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.name + "&minPrice=&maxPrice=&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
                return res.json()
            }).then(val => {
                this.setState({
                    Hot: val.result.wall.docs,
                })
            })
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=new&page=1&q=" + this.state.name + "&minPrice=&maxPrice=&ppath=&cpc_offset=0&ptp=32.rPCjb.0.0.AztFVg99&offset=&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600777854947").then(res => {
                return res.json()
            }).then(val => {
                this.setState({
                    xl: val.result.wall.docs,
                })
            })
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.name + "&minPrice=&maxPrice=&ppath=&cpc_offset=0&ptp=32.rPCjb.0.0.6Cz33xU2&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600776440265").then(res => {
                return res.json()
            }).then(val => {
                this.setState({
                    xin: val.result.wall.docs,
                })
            })
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.name + "&minPrice=" + this.state.min + "&maxPrice=" + this.state.max + "&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
                return res.json()
            }).then(val => {
                this.setState({
                    main: val.result.wall.docs,
                })
            })
        }, 0)

    }

    todoonclick = (params) => {
        this.props.history.push('/cart')
    }
    mins = (params) => {
        this.setState({
            min: 30,
            max: 50
        })
        setTimeout(() => {
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.name + "&minPrice=" + this.state.min + "&maxPrice=" + this.state.max + "&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
                return res.json()
            }).then(val => {
                this.setState({ main: val.result.wall.docs, })
            })
        }, 0)
    }
    mens = (params) => {
        this.setState({
            min: 50,
            max: 80 
            
        })
        setTimeout(() => {
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.name + "&minPrice=" + this.state.min + "&maxPrice=" + this.state.max + "&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
                return res.json()
            }).then(val => {
                this.setState({ main: val.result.wall.docs, })
            })
        }, 0)
    }
    maxs = (params) => {
        this.setState({
            min: 80,
            max: 100
        })
        setTimeout(() => {
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.name + "&minPrice=" + this.state.min + "&maxPrice=" + this.state.max + "&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
                return res.json()
            }).then(val => {
                this.setState({ main: val.result.wall.docs, })
            })
        }, 0)
    }
    nise=(e) => {
        
        setTimeout(() => {
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.name + "&minPrice=" + this.state.min + "&maxPrice=" + this.state.max + "&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
                return res.json()
            }).then(val => {
                this.setState({ main: val.result.wall.docs, })
            })
        }, 0)
    }
    laier1=(e) => {
        this.setState({
            min:e.target.value
        })
    }
    
    laier2=(e) => {
        this.setState({
            max:e.target.value
        })
        
    }
    todoonclick = () => {
        let name = this.refs.inputmy.value
        this.setState({
            name: name===""?name:[...this.state.name,name]
        }, () => {
            if(name===""){

            }else{
                window.localStorage.setItem('myList', this.state.name)
            }
        })
        this.refs.inputmy.value = '';
  
        setTimeout(()=>{
           window.history.go(0)
            // this.props.history.push("./SearchDetails")
        },0)

    }
    caatclick=(params) => {
        this.props.history.push('/my/cart')
    }
    
    
    render() {
        return (
            <div className="Searchdetails">
                {/* 搜索栏开始 */}
                <div className="Searchdetails-nav">
                    <div className="nav-left" onClick={() => window.history.go(-1)}><img className="nav-left-i" src={Left} alt=""></img></div>
                    <div className="nav-rigth">
                        <input className="nav-right-bar" type='text' onKeyDown={(e) => { if (e.keyCode === 13) { this.todoonclick() } }} ref='inputmy'></input>
                        <img onClick={this.todoonclick} className="nav-right-dele" src={hc} alt=''></img>
                        <span className="nav-right-go" onClick={this.caatclick}><img src={gg} className="nav-right-gwc" alt=''></img></span>
                    </div>
                </div>
                {/* 搜索栏结束 */}
                {/* {标签页开始} */}
                <div className="Searchdetails-tabs">
                    <Tabs tabs={tabs}
                        initialPage={0}
                        className="tabs-index"
                        tabBarActiveTextColor="red"
                        onTabClick={this.mainonclick}
                    >
                        <div className="tabs-list border1">{/*综合*/}
                            {this.state.Hot.map((v, i) => {
                                return (
                                    <div className="tabs-list-div" key={v.tradeItemId}>
                                        <div className="tabs-list-img"><img className="tabs-list-imgs" src={v.img}alt=''></img></div>
                                        <div className="tabs-list-title">
                                            <span className="tabs-list-title-text1">{v.leftbottom_taglist.content === [] ? "" : v.leftbottom_taglist.content}</span>
                                            <span className="tabs-list-title-text2" >{v.title}</span>
                                        </div>
                                        <div className="tabs-list-div-miss">
                                            <span className="tabs-list-title-text3" ><span className="title-text3-left">￥{v.price}</span><span className="title-text3-right">{v.cfav}<img className="text3-right-img" src={sc} alt=''></img></span></span>
                                        </div>

                                    </div>
                                )
                            })}
                        </div>
                        <div className="tabs-list border2">{/*销量*/}
                            {this.state.xl.map((v, i) => {
                                return (
                                    <div className="tabs-list-div" key={v.tradeItemId}>
                                        <div className="tabs-list-img"><img className="tabs-list-imgs" src={v.img} alt=''></img></div>
                                        <div className="tabs-list-title">
                                            <span className="tabs-list-title-text1">{v.leftbottom_taglist.content === [] ? "" : v.leftbottom_taglist.content}</span>
                                            <span className="tabs-list-title-text2" >{v.title}</span>
                                        </div>
                                        <div className="tabs-list-div-miss">
                                            <span className="tabs-list-title-text3" ><span className="title-text3-left">￥{v.price}</span><span className="title-text3-right">{v.cfav}<img className="text3-right-img" src={sc} alt=''></img></span></span>
                                        </div>

                                    </div>
                                )
                            })}
                        </div>
                        <div className="tabs-list border3" >{/*新品*/}
                            {this.state.xin.map((v, i) => {
                                return (
                                    <div className="tabs-list-div" key={v.tradeItemId}>
                                        <div className="tabs-list-img"><img className="tabs-list-imgs" src={v.img} alt=''></img></div>
                                        <div className="tabs-list-title">
                                            <span className="tabs-list-title-text1">{v.leftbottom_taglist.content === [] ? "" : v.leftbottom_taglist.content}</span>
                                            <span className="tabs-list-title-text2" >{v.title}</span>
                                        </div>
                                        <div className="tabs-list-div-miss">
                                            <span className="tabs-list-title-text3" ><span className="title-text3-left">￥{v.price}</span><span className="title-text3-right">{v.cfav}<img className="text3-right-img" src={sc} alt=''></img></span></span>
                                        </div>

                                    </div>
                                )
                            })}
                        </div>

                        <div className="tabs-list border4">{/*价格*/}
                            <div className="border4-div">
                                <div className="border4-div-menni">
                                    <span className="div-menni-txt" onClick={this.mins}>30-50</span>
                                    <span className="div-menni-txt" onClick={this.mens}>50-80</span>
                                    <span className="div-menni-txt" onClick={this.maxs}>80-100</span>
                                </div>
                                <div className="border4-div-xuanze">
                                    <span className="div-xuanze-txt">区间(元)</span>
                                    <input type="text" className="div-xuanze-inp1" value={this.state.min} onChange={this.laier1}></input>
                                -
                                    <input type="text" className="div-xuanze-inp2" value={this.state.max} onChange={this.laier2}></input>
                                    <span className="div-xuanze-true" onClick={this.nise}>确认</span>
                                </div>
                            </div>
                            {this.state.main.map((v, i) => {
                                return (
                                    <div className="tabs-list-div" key={v.tradeItemId}>
                                        <div className="tabs-list-img"><img className="tabs-list-imgs" src={v.img} alt=''></img></div>
                                        <div className="tabs-list-title">
                                            <span className="tabs-list-title-text1">{v.leftbottom_taglist.content === [] ? "" : v.leftbottom_taglist.content}</span>
                                            <span className="tabs-list-title-text2" >{v.title}</span>
                                        </div>
                                        <div className="tabs-list-div-miss">
                                            <span className="tabs-list-title-text3" ><span className="title-text3-left">￥{v.price}</span><span className="title-text3-right">{v.cfav}<img className="text3-right-img" src={sc} alt=''></img></span></span>
                                        </div>

                                    </div>
                                )
                            })}
                        </div>
                    </Tabs>
                </div>
                {/* {标签页结束} */}
            </div>

        )
    }
}
